<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 50px; box-sizing: border-box">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
								:disabled="method === 'view' || formReadOnly"
								:class="method === 'view' ? 'readonly' : ''" :rules="rules">
								<div style="text-align: center">
									<h3 style="font-weight: bold; color: black; font-size: 24px">
										商务付款合同
									</h3>
								</div>
								<table style="
                    margin: 0 auto;
                    width: 80%;
                    margin-top: 20px;
                    border-collapse: collapse;
                    margin-bottom: 20px;
                  ">
									<tr style="line-height: 3.5">
										<td colspan="4" style="
                        font-weight: bold;
                        text-align: left;
                        padding-left: 32px;
                        position: relative;
                        font-size: 14px;
                      ">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="
                          position: absolute;
                          width: 20px;
                          height: 20px;
                          left: 0px;
                          top: 14px;
                          margin-left: 8px;
                        " />
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申 请 人</td>
										<td class="width-30">
											<el-form-item prop="people.id">
												<user-select :limit="1" :value="inputForm.people.id" @getValue="
                            (value) => {
                              inputForm.people.id = value;
                            }
                          " disabled></user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="peopleOffice.id" :rules="[
                          {
                            required: true,
                            message: '所属公司不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<SelectTree ref="peopleOffice" :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" url="/sys/office/treeData?type=2" :value="inputForm.peopleOffice.id" :clearable="true"
													:accordion="true" @getValue="
                            (value) => {
                              inputForm.peopleOffice.id = value;
                            }
                          " disabled />
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请日期</td>
										<td class="width-30">
											<el-form-item prop="" :rules="[
                          {
                            required: true,
                            message: '申请日期不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-date-picker v-model="inputForm.applydate" type="datetime"
													style="width: 100%" disabled value-format="yyyy-MM-dd HH:mm:ss"
													placeholder="选择日期时间">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="peopleDepartment.id" :rules="[
                          {
                            required: true,
                            message: '所属部门不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<SelectTree ref="peopleDepartment" :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" disabled url="/sys/office/treeData?type=2" :value="inputForm.peopleDepartment.id"
													:clearable="true" :accordion="true" @getValue="
                            (value) => {
                              inputForm.peopleDepartment.id = value;
                            }
                          " />
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5">
										<td colspan="4" style="
                        font-weight: bold;
                        text-align: left;
                        padding-left: 32px;
                        position: relative;
                        font-size: 14px;
                      ">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="
                          position: absolute;
                          width: 20px;
                          height: 20px;
                          left: 0px;
                          top: 14px;
                          margin-left: 8px;
                        " />
											合同信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">合同编号</td>
										<td class="width-30">
											<el-form-item prop="contractNumber">
												<el-input v-model="inputForm.contractNumber" disabled></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>合同名称</td>
										<td class="width-30">
											<el-form-item prop="contractName" :rules="[
                          {
                            required: true,
                            message: '合同名称不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.contractName"
													:disabled="method === 'edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="showButton">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>甲<span
												style="margin-left: 20px">方</span>
										</td>
										<td class="width-30">
											<el-form-item prop="partyA.id" :rules="[
                          {
                            required: true,
                            message: '甲方不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<!-- <el-input v-model="inputForm.partyA"   :disabled="method==='edit'"></el-input> -->
												<SelectTree :disabled="method==='edit'" ref="partyA" :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" url="/sys/office/treeData?type=2" :value="inputForm.partyA.id" :clearable="true"
													:accordion="true" @getValue="
                            (value) => {
                              inputForm.partyA.id = value;
                            }
                          " />
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>乙<span
												style="margin-left: 20px">方</span>
										</td>
										<td class="width-30">
											<el-form-item prop="partyB" :rules="[
                          {
                            required: true,
                            message: '乙方不能为空',
                            trigger: ['blur', 'change'],
                          },
                        ]">
												<el-input v-model="inputForm.partyB" :disabled="method==='edit'"
													placeholder="请填写"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>合同金额(￥)
										</td>
										<td class="width-30">
											<el-form-item prop="contractAmount" :rules="[
                          {
                            required: true,
                            message: '合同金额不能为空',
                            trigger: 'blur',
                            pattern: /^\d*\.?(\d|\d{2})$/,
                          },
                        ]">
												<el-input v-model="inputForm.contractAmount" @input="moneySwitch">
												</el-input>
											</el-form-item>
										</td>
										<td class="width-15">大写金额</td>
										<td class="width-30">
											<el-form-item prop="capitalizeContract">
												<el-input v-model="inputForm.capitalizeContract" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="showButton">
										<td class="width-15">付款金额(￥)</td>
										<td class="width-30">
											<el-form-item prop="refundAmount">
												<el-input v-model="inputForm.refundAmount"
													:disabled="method === 'edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">大写金额</td>
										<td class="width-30">
											<el-form-item prop="returnCapital">
												<el-input v-model="inputForm.returnCapital" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="showButton">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>未付款金额(￥)
										</td>
										<td class="width-30">
											<el-form-item prop="unpaidAmount">
												<el-input v-model="inputForm.unpaidAmount"
													:disabled="method === 'edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">大写金额</td>
										<td class="width-30">
											<el-form-item prop="capitalizedAmount">
												<el-input v-model="inputForm.capitalizedAmount" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden" v-if="showButton">
										<td class="width-15">付款比例(%)</td>
										<td class="width-30">
											<el-form-item prop="receiptRatio">
												<el-input v-model="inputForm.receiptRatio"
													:disabled="method === 'edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">未付款比例(%)</td>
										<td class="width-30">
											<el-form-item prop="unpaidRatio">
												<el-input v-model="inputForm.unpaidRatio" :disabled="method === 'edit'">
												</el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">关联合同类型</td>
										<td class="width-30">
											<el-form-item prop="associatedType">
												<el-select :disabled="method==='edit'"
													v-model="inputForm.associatedType" style="width: 100%"
													@change="associatedTypeChange">
													<el-option v-for="item in $dictUtils.getDictList(
                              'type_of_contract'
                            )" :key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</td>
										<td class="width-15">关联合同</td>
										<td class="width-30">
											<el-form-item prop="associatedContractName">
												<el-input v-model="inputForm.associatedContractName"
													placeholder="请填写关联合同" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>部门负责人
										</td>
										<td class="width-30" style="width: 32%">
											<el-form-item prop="contractPerson.id" :rules="[
                          {
                            required: true,
                            message: '部门负责人不能为空',
                            trigger: ['blur','change'],
                          },
                        ]">
												<GridSelects :disabled="method === 'edit'" title="选择负责人"
													labelName="name" labelValue="id"
													:value="inputForm.contractPerson.id" :limit="1"
													@getValue="getValuaesUser2(arguments)" :columns="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]" :searchs="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]" :dataListUrl="setAPersonUrl2" entityBeanName="user" queryEntityUrl="/sys/user/queryById">
												</GridSelects>
												<!-- <user-select
                          :limit="1"
                          :value="inputForm.contractPerson.id"
                          @getValue="
                            (value) => {
                              inputForm.contractPerson.id = value;
                            }
                          "
                        ></user-select> -->
											</el-form-item>
										</td>
										<td class="width-15" v-if="showButton && this.$route.query.types"><span
												style="color: red">*&nbsp;</span>签约时间</td>
										<td class="width-30" v-if="showButton && this.$route.query.types">
											<el-form-item prop="signingTime"
												:rules="[{required: true, message:'签约时间不能为空', trigger:['blur','change']}]">
												<el-date-picker :disabled="power==0 || power==2 ||power ==3"
													v-model="inputForm.signingTime" type="date" style="width: 100%;"
													value-format="yyyy-MM-dd" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td v-if="!this.$route.query.types" class="width-15"></td>
										<td v-if="!this.$route.query.types" class="width-30"></td>
									</tr>
									<tr class="iconHidden" v-if="showButton && this.$route.query.types">
										<td class="width-15"><span style="color: red">*&nbsp;</span>开始时间</td>
										<td class="width-30">
											<el-form-item prop="begintime"
												:rules="[{required: true, message:'开始时间不能为空', trigger:['blur','change']}]">
												<el-date-picker :disabled="power==0 || power==2 ||power ==3"
													v-model="inputForm.begintime" type="date" style="width: 100%;"
													value-format="yyyy-MM-dd" @change="judgeHour" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>结束时间</td>
										<td class="width-30">
											<el-form-item prop="endtime"
												:rules="[{required: true, message:'结束时间不能为空', trigger:['blur','change']}]">
												<el-date-picker :disabled="power==0 || power==2 ||power ==3"
													v-model="inputForm.endtime" type="date" style="width: 100%;"
													value-format="yyyy-MM-dd" @change="judgeHour" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg" v-if="showButton && this.$route.query.types">
										<td class="width-15"><span style="color: red">*&nbsp;</span>合同形式</td>
										<td class="width-30">
											<el-form-item prop="contractForm"
												:rules="[{required: true, message:'合同形式不能为空', trigger:['blur','change']}]">
												<el-select v-model="inputForm.contractForm" placeholder="请选择"
													style="width: 100%;" @change="contractFormChange"
													:disabled="power==0 || power==2 ||power ==3">
													<el-option v-for="item in $dictUtils.getDictList('contract_forms')"
														:key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</td>
										<td class="width-15" v-if="inputForm.contractForm==0 && inputForm.contractForm">
											<span style="color: red">*&nbsp;</span>保 管 人
										</td>
										<td class="width-30" v-if="inputForm.contractForm==0 && inputForm.contractForm"
											style="width:32%">
											<el-form-item prop="user.id"
												:rules="[{required: true, message:'保 管 人不能为空', trigger:['blur','change']}]">
												<user-select :limit='1' :value="inputForm.user.id"
													@getValue='(value) => {inputForm.user.id=value}' readonly
													:disabled="!inputForm.contractForm || inputForm.contractForm==1 || power==0 || power==2 ||power ==3">
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15" v-if="inputForm.contractForm==1 && inputForm.contractForm">
											是否电子签</td>
										<td class="width-30" v-if="inputForm.contractForm==1 && inputForm.contractForm">
											<el-select v-model="signatureVal" placeholder="请优先选择归档附件"
												style="width: 100%;"
												:disabled="power==0 || power==2 ||power ==3 ||!inputForm.archiveAnnex"
												@change="signatureChange">
												<el-option v-for="item in signatureOptions" :key="item.value"
													:label="item.label" :value="item.value">
												</el-option>
											</el-select>
										</td>
										<td class="width-15" v-if="!inputForm.contractForm"></td>
										<td class="width-30" v-if="!inputForm.contractForm"></td>
									</tr>
									<tr class="iconHiddens"
										v-if="showButton  && this.$route.query.types&& inputForm.contractForm==0 && inputForm.contractForm">
										<td class="width-15"><span style="color: red">*&nbsp;</span>合同存放位置</td>
										<td class="width-30">
											<el-form-item prop="contractLocation"
												:rules="[{required: true, message:'合同存放位置不能为空', trigger:['blur','change']}]">
												<el-input v-model="inputForm.contractLocation"
													:disabled="!inputForm.contractForm || inputForm.contractForm==1 || power==0 || power==2 ||power ==3">
												</el-input>
											</el-form-item>
										</td>
										<td class="width-15"></td>
										<td class="width-30">
										</td>
									</tr>
									<!-- <td class="width-15">合同预警</td>
                    <td class="width-30">
                      <el-form-item prop="earlywarning">
                        <el-input
                          v-model="inputForm.earlywarning"
                          placeholder="请填写合同预警"
                        ></el-input>
                      </el-form-item>
                    </td> -->
									<!-- <tr class="iconHidden">
                    <td class="width-15">是否归档</td>
                    <td class="width-30">
                      <el-form-item prop="archive">
                        <el-select
                          v-model="inputForm.archive"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in $dictUtils.getDictList('yes_no')"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr> -->
									<!-- <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">合同说明</td>
                    <td class="width-30">
                      <el-form-item prop="descriptions">
                        <el-input
                          v-model="inputForm.descriptions"
                          placeholder="请填写合同说明"
                        ></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">合作方式</td>
                    <td class="width-30">
                      <el-form-item
                        prop="cooperationMethod"
                        :rules="[
                          {
                            required: true,
                            message: '合作方式不能为空',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-select
                          v-model="inputForm.cooperationMethod"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in $dictUtils.getDictList(
                              'cooperation_method'
                            )"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr> -->
									<!-- <tr class="iconHidden"  v-if="showButton">
                    <td class="width-15">进行状态</td>
                    <td class="width-30">
                      <el-form-item prop="type">
                        <el-input
                          v-model="inputForm.type"
                          placeholder="请填写进行状态"
                        ></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">付款方式</td>
                    <td class="width-30">
                      <el-form-item prop="paytype">
                        <el-select
                          v-model="inputForm.paytype"
                          placeholder="请选择"
                          style="width: 100%"
                        >
                          <el-option
                            v-for="item in $dictUtils.getDictList('payway')"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr> -->
									<tr class="iconHiddens" v-if="showButton  && this.$route.query.types">
										<td class="width-15"><span v-if="inputForm.contractForm==1"
												style="color: red">*&nbsp;</span>归档附件</td>
										<td colspan="4" style="position: relative">
											<!-- :on-preview="handlePreview" -->
											<el-form-item prop="archiveAnnex" v-if="inputForm.contractForm==1"
												:rules="[{required: true, message:'归档附件不能为空', trigger:['blur','change']}]">
												<el-upload ref="archiveAnnex" :disabled="
                            inputForm.contractForm == 0 ||
                            power == 0 ||
                            power == 2 ||
                            power == 3
                          " :action="`${this.$http.BASE_URL}/dlyrlTest/contractUpload`"
													:headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) ||
                                  file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.archiveAnnex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                              this.$refs.inputForm.clearValidate(['archiveAnnex'])
                              archiveAnnexId = fileList.map(item =>(item.response && item.response.id) || item.id).join('|');
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.archiveAnnex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="1" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 1个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="archiveAnnexArra">
													<el-button size="small" type="primary" style="
                              position: absolute;
                              right: 5px;
                              top: 0px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
												</el-upload>
												<!-- <el-input
                          v-model="inputForm.archiveAnnex"
                          placeholder="请填写归档附件"
                        ></el-input> -->
											</el-form-item>
											<el-form-item prop="archiveAnnex" v-if="inputForm.contractForm==0">
												<el-upload ref="archiveAnnex" disabled
													:action="`${this.$http.BASE_URL}/dlyrlTest/contractUpload`"
													:headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) ||
                                  file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.archiveAnnex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                              this.$refs.inputForm.clearValidate(['archiveAnnex'])
                              
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.archiveAnnex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="1" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 1 个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="archiveAnnexArra">
													<el-button size="small" type="primary" disabled style="
                              position: absolute;
                              right: 5px;
                              top: 0px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
												</el-upload>
												<!-- <el-input
                          v-model="inputForm.archiveAnnex"
                          placeholder="请填写归档附件"
                        ></el-input> -->
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											附<span style="margin-left: 20px">件</span>
										</td>
										<td colspan="4" style="position: relative">
											<el-upload ref="annex" :disabled="method === 'edit'"
												:action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/buspaycontract/buspayContract`"
												:headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) || file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.annex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.annex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="5" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 5 个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="annexArra">
												<el-button size="small" type="primary" style="
                              position: absolute;
                              right: 5px;
                              top: 4px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
											</el-upload>
										</td>
									</tr>
									<tr style="height: 80px; line-height: 80px" v-if="showButton">
										<td class="width-15 active" style="line-height: 80px">
											合同说明
										</td>
										<td colspan="4" style="padding: 0 10px">
											<el-form-item prop="descriptions">
												<el-input v-model="inputForm.descriptions"
													:disabled="power == 0 || power == 2 || power == 3"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5">
										<td colspan="4" style="
                        font-weight: bold;
                        text-align: left;
                        padding-left: 32px;
                        position: relative;
                        font-size: 14px;
                      ">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="
                          position: absolute;
                          width: 20px;
                          height: 20px;
                          left: 0px;
                          top: 14px;
                          margin-left: 8px;
                        " />
											甲方信息
											<!-- 短信通知 -->
											<span v-if="messageSuccess" style="margin-left:150px">
												<el-button v-show="!messageShow" @click="sendMessage()" type="text"
													size="mini" icon="el-icon-s-promotion">短信通知</el-button>
												<el-button v-show="messageShow" type="text" size="mini"
													icon="el-icon-s-promotion">{{ sendMessageNum }}s后通知</el-button>
											</span>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											公<span style="margin-left: 20px">司</span>
										</td>
										<td class="width-30">
											<el-form-item prop="aOffice" :rules="[
                          {
                            required: true,
                            message: '公司不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<SelectTree disabled :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" url="/sys/office/treeData?type=2" :value="inputForm.aOffice" :clearable="true"
													:accordion="true" @getValue="
                            (value) => {
                              inputForm.aOffice = value;
                            }
                          " />
												<!-- <el-input
                          v-model="inputForm.aOffice"
                          placeholder="请填写公司"
                          disabled
                        ></el-input> -->
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>地<span
												style="margin-left: 20px">址</span>
										</td>
										<td class="width-30">
											<el-form-item prop="aAddress" :rules="[
                          {
                            required: true,
                            message: '地址不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aAddress" placeholder="请填写地址" disabled>
												</el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>负 责 人
										</td>
										<td class="width-30" style="width: 32%">
											<el-form-item prop="aPerson.id" :rules="[
                          {
                            required: true,
                            message: '负责人不能为空',
                            trigger: ['blur', 'change'],
                          },
                        ]">
												<GridSelects :disabled="method === 'edit'" title="选择负责人"
													labelName="name" labelValue="id" :value="inputForm.aPerson.id"
													:limit="1" @getValue="getValuaesUser1(arguments)" :columns="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]" :searchs="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :dataListUrl="setAPersonUrl1" entityBeanName="user" queryEntityUrl="/sys/user/queryById">
												</GridSelects>
												<!-- <user-select
                          :limit="1"
                          :value="inputForm.aPerson.id"
                          @getValue="
                            (value) => {
                              inputForm.aPerson.id = value;
                            }
                          "
                        ></user-select> -->
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>负责人电话
										</td>
										<td class="width-30">
											<el-form-item prop="aPhone" :rules="[
                          {
                            required: true,
                            message: '电话不能为空',
                            trigger: ['blur','change'],
                          },
                        ]">
												<el-input v-model="inputForm.aPhone" placeholder="请填写电话" disabled>
												</el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>开票名称
										</td>
										<td class="width-30">
											<el-form-item prop="aBillingName" :rules="[
                          {
                            required: true,
                            message: '开票名称不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aBillingName" :disabled="method==='edit'">
												</el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>纳税人识别号
										</td>
										<td class="width-30">
											<el-form-item prop="aBillingNumber" :rules="[
                          {
                            required: true,
                            message: '纳税人识别号不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aBillingNumber"
													:disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>地<span
												style="margin-left: 20px">址</span>
										</td>
										<td class="width-30">
											<el-form-item prop="aBillingAddress" :rules="[
                          {
                            required: true,
                            message: '开票地址不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aBillingAddress" disabled></el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>电<span
												style="margin-left: 20px">话</span>
										</td>
										<td class="width-30">
											<el-form-item prop="aBillingPhone" :rules="[
                          {
                            required: true,
                            message: '开票电话不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aBillingPhone" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>开 户 行
										</td>
										<td class="width-30">
											<el-form-item prop="aBillingBank" :rules="[
                          {
                            required: true,
                            message: '开票开户行不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aBillingBank" disabled></el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>账<span
												style="margin-left: 20px">号</span>
										</td>
										<td class="width-30">
											<el-form-item prop="aAccountNumber" :rules="[
                          {
                            required: true,
                            message: '开票账号不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.aAccountNumber" disabled></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5">
										<td colspan="4" style="
                        font-weight: bold;
                        text-align: left;
                        padding-left: 32px;
                        position: relative;
                        font-size: 14px;
                      ">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="
                          position: absolute;
                          width: 20px;
                          height: 20px;
                          left: 0px;
                          top: 14px;
                          margin-left: 8px;
                        " />
											乙方信息
										</td>
									</tr>
									<tr>
										<td colspan="4" style="
                        text-align: left;
                        padding: 10px 32px;
                        position: relative;
                        font-size: 14px;
                      ">
											合作方式
											<el-radio-group v-model="inputForm.cooperationMethod"
												@change="cooperationMethodChange" style="margin-left: 20px"
												:disabled="method === 'edit'">
												<el-radio label="0">平台合同</el-radio>
												<el-radio label="1">普通合同</el-radio>
											</el-radio-group>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg">
										<td class="width-15"><span style="color: red">*&nbsp;</span>公<span
												style="margin-left: 20px">司</span></td>
										<td class="width-30">
											<el-form-item prop="bOffice"
												:rules="[{required: true,message: '公司不能为空',trigger: ['blur','change'],}]">
												<GridSelects v-if="inputForm.cooperationMethod == 0" title="选择企业"
													:disabled="method === 'edit'" labelName="companyName"
													labelValue="id" :value="inputForm.bOffice" :limit="1"
													@getValue="getValuaes(arguments)" :columns="[
                            {
                              prop: 'companyName',
                              label: '企业名称',
                            },
                            {
                              prop: 'detailedArea',
                              label: '地址',
                            },
                          ]" :searchs="[
                            {
                              prop: 'companyName',
                              label: '企业名称',
                            },
                            {
                              prop: 'detailedArea',
                              label: '地址',
                            },
                          ]" dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
													entityBeanName="enterpriseInformation"
													queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
												</GridSelects>
												<el-input v-if="inputForm.cooperationMethod == 1"
													v-model="inputForm.bOffice" :disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>地<span
												style="margin-left: 20px">址</span></td>
										<td class="width-30">
											<el-form-item prop="bAddress"
												:rules="[{required: true,message: '地址不能为空',trigger: ['blur','change'],},]">
												<el-input v-if="inputForm.cooperationMethod == 0"
													v-model="inputForm.bAddress"
													:disabled="method==='edit' || inputForm.cooperationMethod==0">
												</el-input>
												<el-input v-if="inputForm.cooperationMethod == 1"
													v-model="inputForm.bAddress" :disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens errorMsg">
										<td class="width-15"> <span style="color: red">*&nbsp;</span>负 责 人 </td>
										<td class="width-30">
											<el-form-item prop="bPerson"
												:rules="[{ required: true, message: '负责人不能为空',trigger: ['blur', 'change'],},]">
												<GridSelects v-if="inputForm.cooperationMethod == 0" title="选择负责人"
													labelName="identityName" labelValue="id" :value="inputForm.bPerson"
													:limit="1" :disabled="inputForm.bOffice.length == 0"
													@getValue="getValuaesUser(arguments)" :columns="[
                            {
                              prop: 'identityName',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :searchs="[
                            {
                              prop: 'identityName',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :dataListUrl="setAPersonUrl" entityBeanName="enterpriseUserInformation"
													queryEntityUrl="/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/queryById">
												</GridSelects>
												<el-input v-if="inputForm.cooperationMethod == 1"
													v-model="inputForm.bPerson" :disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>电<span
												style="margin-left: 20px">话</span></td>
										<td class="width-30">
											<el-form-item prop="bPhone">
												<el-input v-if="inputForm.cooperationMethod == 0"
													v-model="inputForm.bPhone"
													:disabled="method==='edit'  || inputForm.cooperationMethod==0">
												</el-input>
												<el-input v-if="inputForm.cooperationMethod == 1"
													v-model="inputForm.bPhone" :disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>开票名称
										</td>
										<td class="width-30">
											<el-form-item prop="bBillingName" :rules="[
                          {
                            required: true,
                            message: '开票名称不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.bBillingName" :disabled="method==='edit'">
												</el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>纳税人识别号
										</td>
										<td class="width-30">
											<el-form-item prop="bBillingNumber" :rules="[
                          {
                            required: true,
                            message: '开票纳税人识别号不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.bBillingNumber"
													:disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>地<span
												style="margin-left: 20px">址</span>
										</td>
										<td class="width-30">
											<el-form-item prop="bBillingAddress" :rules="[
                          {
                            required: true,
                            message: '开票地址不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.bBillingAddress"
													:disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>电<span
												style="margin-left: 20px">话</span>
										</td>
										<td class="width-30">
											<el-form-item prop="bBillingPhone">
												<el-input v-model="inputForm.bBillingPhone" :disabled="method==='edit'">
												</el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>开 户 行
										</td>
										<td class="width-30">
											<el-form-item prop="bBillingBank" :rules="[
                          {
                            required: true,
                            message: '开票开户行不能为空',
                            trigger: 'blur',
                          },
                        ]">
												<el-input v-model="inputForm.bBillingBank" :disabled="method==='edit'">
												</el-input>
											</el-form-item>
										</td>
										<td class="width-15">
											<span style="color: red">*&nbsp;</span>账<span
												style="margin-left: 20px">号</span>
										</td>
										<td class="width-30">
											<el-form-item prop="bAccountNumber">
												<el-input v-model="inputForm.bAccountNumber"
													:disabled="method==='edit'"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="height: 80px; line-height: 80px">
										<td class="width-15 active" style="line-height: 80px">
											备<span style="margin-left: 20px">注</span>
										</td>
										<td colspan="4" style="padding: 0 10px">
											<el-form-item prop="remarks">
												<el-input v-model="inputForm.remarks" :disabled="method==='edit'">
												</el-input>
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5" v-if="showButton">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px;">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px;" />
											开票信息
										</td>
									</tr>
									<tr v-if="showButton && power == 3">
										<td colspan="4" class="addDelImg">
											<i v-if="this.showButton" id="add" @click="add"
												class="el-icon-circle-plus"></i>
											<i v-if="this.showButton" id="sub" @click="delAll"
												class="el-icon-remove"></i>
										</td>
									</tr>
									<tr v-if="showButton">
										<td colspan="4" class="elTable">
											<div style="width: 100%">
												<el-table size="small"
													:data="inputForm.ticketList.filter(function (item) {return item.delFlag !== '1';})"
													row-key="id" style="border-collapse: collapse"
													:cell-style="cellStyle_attached"
													:header-cell-class-name="cellHeadStyle_attached"
													:tree-props="{children: 'children',hasChildren: 'hasChildren',}"
													ref="ticketLists">
													<el-table-column type="selection" width="50" align="center">
													</el-table-column>
													<el-table-column prop="invoiceDate" header-align="center"
														align="center" show-overflow-tooltip label="开票日期">
													</el-table-column>
													<el-table-column prop="type" header-align="center" align="center"
														show-overflow-tooltip label="发票类型">
													</el-table-column>
													<el-table-column prop="subType" header-align="center" align="center"
														show-overflow-tooltip label="发票细分类型">
													</el-table-column>
													<el-table-column prop="withTaxAmount" header-align="center"
														align="center" show-overflow-tooltip label="价税合计">
													</el-table-column>
													<el-table-column prop="sysuser.name" header-align="center"
														align="center" show-overflow-tooltip label="收集用户">
													</el-table-column>
													<el-table-column header-align="center" align="center" width="120"
														label="点击查看">
														<template slot-scope="scope">
															<el-image style="width: 100px; height: 50px"
																:src="scope.row.dmzUrl"
																:preview-src-list="[scope.row.dmzUrl]"></el-image>
														</template>
													</el-table-column>
													<el-table-column label="操作">
														<template slot-scope="scope">
															<el-button @click="addInvoices(scope)" type="text"
																size="mini">添加发票</el-button>
														</template>
													</el-table-column>
												</el-table>
											</div>
										</td>
									</tr>
									<tr style="line-height: 3.5" v-if="showButton">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px;">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px;" />
											付款信息
										</td>
									</tr>
									<tr v-if="showButton && power == 3">
										<td colspan="4" class="addDelImg">
											<i id="add" @click="addRecordPayRow" class="el-icon-circle-plus"></i>
										</td>
									</tr>
									<tr v-if="showButton">
										<td colspan="4" class="elTable">
											<div style="width: 100%">
												<!-- <el-form-item label-width="0">
												<el-tabs v-model="buspayContractTab">
												  <el-tab-pane label="付款信息">
													<el-button
													  size="small"
													  @click="addRecordPayRow"
													  type="primary"
													  >新增</el-button
													>-->
												<el-table size="small"
													:data="inputForm.recordPayList.filter(function (item) {return item.delFlag !== '1';})"
													row-key="id" style="border-collapse: collapse"
													:cell-style="cellStyle_attached"
													:header-cell-class-name="cellHeadStyle_attached"
													:tree-props="{children: 'children',hasChildren: 'hasChildren',}">
													<el-table-column prop="date" header-align="center" align="center"
														show-overflow-tooltip label="日期">
													</el-table-column>
													<el-table-column prop="money" header-align="center" align="center"
														show-overflow-tooltip label="金额">
													</el-table-column>
													<el-table-column prop="capitalizedAmount" header-align="center"
														align="center" show-overflow-tooltip label="大写金额">
													</el-table-column>
													<el-table-column prop="confirmor.name" header-align="center"
														align="center" show-overflow-tooltip label="确认人">
														<template slot-scope="scope">
															<span
																v-if="scope.row.confirmor.name != ''">{{scope.row.confirmor.name}}</span>
															<el-button v-else type="text" size="mini"
																@click="confimReceivable(scope.row)"
																:disabled="power == 0 || power == 1 || power == 2">确认付款
															</el-button>
														</template>
													</el-table-column>
													<el-table-column prop="remarks" header-align="center" align="center"
														show-overflow-tooltip label="备注信息">
													</el-table-column>
													<el-table-column fixed="right" label="操作" width="150">
														<template slot-scope="scope">
															<el-button @click="viewRecordPayRow(scope.row)" type="text"
																size="mini">查看</el-button>
															<el-button @click="editRecordPayRow(scope.row)"
																v-if="scope.row.confirmor.name == ''" type="text"
																size="mini"
																:disabled="power == 0 || power == 1 || power == 2">编辑
															</el-button>
															<el-button @click="delRecordPayRow(scope.row)"
																v-if="scope.row.confirmor.name == ''" type="text"
																size="mini"
																:disabled="power == 0 || power == 1 || power == 2">删除
															</el-button>
														</template>
													</el-table-column>
												</el-table>
											</div>
										</td>
									</tr>
									<!-- </el-tab-pane>
									</el-tabs>
								  </el-form-item>  -->
								</table>
							</el-form>
						</div>
					</div>
					<el-dialog title="添加发票" :visible.sync="addInvoiceDialog" width="70%" append-to-body>
						<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
							@keyup.enter.native="refreshList()" @submit.native.prevent>
							<!-- 搜索框-->
							<el-form-item prop="invoiceDate">
								<el-date-picker v-model="searchForm.invoiceDate" type="date" style="width: 100%;"
									value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="开票时间">
						 	</el-date-picker>
							</el-form-item>
							<el-form-item prop="invoicetype">
						  <el-select v-model="searchForm.invoicetype" placeholder="发票类型" style="width: 100%;">
									<el-option v-for="(item,index) in $dictUtils.getDictList('invoicebill_type')"
										:key="index" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="subType">
								<el-select v-model="searchForm.subType" placeholder="细分发票类型" style="width: 100%;">
									<el-option v-for="(item,index) in $dictUtils.getDictList('sub_bill_type')"
										:key="index" :label="item.label" :value="item.value">
									</el-option>
						 	</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
								<el-button @click="resetSearch()" size="small">重置</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="dataList" size="small" height="calc(100% - 80px)"
							@selection-change="selectionChangeHandle" ref="invoiceTables" :cell-style="cellStyle"
							style="border:1px solid #d6cfe2;min-height: 400px;" :header-cell-class-name="cellHeadStyle"
							:row-class-name="tableRowClassName" v-loading="invoiceloading" class="table">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<el-table-column prop="type" show-overflow-tooltip label="发票类型">
								<template slot-scope="scope">
									{{ $dictUtils.getDictLabel("invoicebill_type", scope.row.type, '-') }}
								</template>
							</el-table-column>
							<el-table-column prop="invoiceCode" show-overflow-tooltip label="发票代码">
							</el-table-column>
							<el-table-column prop="invoiceNo" show-overflow-tooltip label="发票号码">
							</el-table-column>
							<el-table-column prop="invoiceDate" show-overflow-tooltip label="开票日期">
							</el-table-column>
							<el-table-column prop="withTaxAmount" show-overflow-tooltip label="含税价格">
							</el-table-column>
							<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()"
								width="120" label="点击查看">
								<template slot-scope="scope">
									<el-image style="width: 100px; height: 50px" :src="scope.row.dmzUrl"
										:preview-src-list="[scope.row.dmzUrl]"></el-image>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
							:current-page="pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
							background layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
						<span slot="footer" class="dialog-footer">
							<el-button size="small" type="primary" @click="addInvoiceClose()" plain>关闭</el-button>
							<el-button size="small" type="primary" @click="addInvoice()" plain>确定</el-button>
						</span>
					</el-dialog>
					<el-dialog title="请选择关联合同" :visible.sync="dialogGUANlht" width="50%">
						<template>
							<el-radio v-model="radioGUANlht" v-for="item in radioGUANlhtList"
								@change="radioGUANlhtChange(item)" :key="item.id" :label="item.id">
								{{ item.contractName }}
							</el-radio>
						</template>
						<span slot="footer" class="dialog-footer">
							<el-button @click="dialogGUANlht = false">取 消</el-button>
							<el-button type="primary" @click="dialogGUANlhtQueding">确 定</el-button>
						</span>
					</el-dialog>
				</div>
			</div>
		</div>
		<!-- 签字弹框 -->
		<div class="signature" v-show="signatureDialog">
			<canvas id="can" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"
				@mouseleave="mouseleave">Canvas画板</canvas>
			<input type="hidden" value="" name="data" />
			<div class="signatureGroup">
				<div class="signatureBtn">
					<button @click="signatureCancel">
						取消
					</button>
				</div>
				<div class="signatureBtn">
					<button @click="btnClick">
						确定
					</button>
				</div>
			</div>
		</div>
		<RecordPayForm ref="recordPayForm" @addRow="saveRecordPayRow(arguments)"></RecordPayForm>
	</div>
</template>

<script>
	import RecordPayForm from "./RecordPayForm";
	import UserSelect from "@/components/userSelect";
	import SelectTree from "@/components/treeSelect/treeSelect.vue";
	import GridSelect from "@/components/gridSelect/index.vue";
	import GridSelects from "@/components/gridSelect/index1.vue";
	import tableStyles from "../../../../../utils/mixins";
	export default {
		mixins: [tableStyles],
		data() {
			var bankAccountValid = (rule, value, callback) => {
				const strBin =
					"10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
				if (!value) {
					return callback(new Error("账号不能为空"));
				} else if (!Number.isInteger(+value)) {
					callback(new Error("银行卡号必须全为数字"));
				} else if (value.trim().length < 12 || value.trim().length > 19) {
					callback(new Error("银行卡号长度必须在12到19之间"));
				} else if (strBin.indexOf(value.substring(0, 2)) === -1) {
					callback(new Error("银行卡号开头6位不符合规范"));
				} else {
					callback();
				}
			};
			return {
				rules: {
					aPhone: [{
							required: true,
							message: "请输入电话",
							trigger: "blur"
						},
						{
							min: 11,
							max: 11,
							message: "请输入正确的电话",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
							message: "请输入正确的电话",
							trigger: "blur",
						},
					],
					aBillingPhone: [{
							required: true,
							message: "请输入电话",
							trigger: "blur"
						},
						{
							min: 11,
							max: 11,
							message: "请输入正确的电话",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
							message: "请输入正确的电话",
							trigger: "blur",
						},
					],
					aAccountNumber: {
						required: true,
						trigger: "blur",
						validator: bankAccountValid,
					},
					bPhone: [{
							required: true,
							message: "请输入电话",
							trigger: ["blur", "change"]
						},
						{
							min: 11,
							max: 11,
							message: "请输入正确的电话",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
							message: "请输入正确的电话",
							trigger: "blur",
						},
					],
					bBillingPhone: [{
							required: true,
							message: "请输入电话",
							trigger: "blur"
						},
						{
							min: 11,
							max: 11,
							message: "请输入正确的电话",
							trigger: "blur"
						},
						{
							required: true,
							pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
							message: "请输入正确的电话",
							trigger: "blur",
						},
					],
					bAccountNumber: {
						required: true,
						trigger: "blur",
						validator: bankAccountValid,
					},
				},
				//签字
				signatureVal: "",
				signatureOptions: [{
						value: "0",
						label: "是"
					},
					{
						value: "1",
						label: "否"
					}
				],
				paint: false, //鼠标左键是否在画板区域按下
				x: null,
				y: null,
				pan: null,
				signatureDialog: false,
				archiveAnnexId: "", //归档附件ID
				signatureUrl: "", //签字成功后返回的路径
				signatureBtnUrl: "", //签字成功，签订合同的接口
				messageShow: false, //是否展示60秒
				sendMessageNum: 60,
				messageSuccess: false, //短信通知默认不显示
				//以上签字
				title: "",
				method: "",
				loading: false,
				annexArra: [],
				setAPersonUrl: "",
				setAPersonUrl1: "",
				setAPersonUrl2: "",
				userId: "", //用户id
				showButton: false,
				contractId: "", //合同id
				power: "", //权限标识
				archiveAnnexArra: [],
				//关联合同
				dialogGUANlht: false,
				radioGUANlhtList: [],
				radioGUANlht: "",
				inputForm: {
					id: "",
					recordPayList: [],
					ticketList: [],
					people: {
						id: "",
					},
					peopleOffice: {
						id: "",
					},
					peopleDepartment: {
						id: "",
					},
					applydate: "",
					contractNumber: "",
					contractName: "",
					associatedType: "",
					associatedContract: "",
					associatedContractName: "", //关联合同ID
					partyA: {
						id: "",
					},
					partyB: "",
					contractAmount: "",
					capitalizeContract: "",
					refundAmount: "",
					returnCapital: "",
					receiptRatio: "",
					contractPerson: {
						id: "",
					},
					unpaidAmount: "",
					capitalizedAmount: "",
					aPerson: {
						id: "",
					},
					aPhone: "",
					aOffice: "",
					aAddress: "",
					aBillingName: "",
					aBillingNumber: "",
					aBillingAddress: "",
					aBillingPhone: "",
					aBillingBank: "",
					aAccountNumber: "",
					bPerson: "",
					bPhone: "",
					bOffice: "",
					bAddress: "",
					bBillingName: "",
					bBillingNumber: "",
					bBillingAddress: "",
					bBillingPhone: "",
					bBillingBank: "",
					bAccountNumber: "",
					begintime: "",
					endtime: "",
					earlywarning: "",
					user: {
						id: "",
					},
					annex: "",
					contractLocation: "",
					signingTime: "",
					contractForm: "",
					archive: "",
					archiveAnnex: "",
					descriptions: "",
					cooperationMethod: "0",
					type: "",
					paytype: "",
					remarks: "",
				},
				searchForm: {
					invoiceDate: "",
					invoicetype: "",
					subType: ""
				},

				// 添加发票
				addInvoiceDialog: false,
				dataList: [],
				invoiceloading: false,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				invoiceIndex: 0,
				invoiceChecks: [],
			}
		},
		props: {
			businessId: {
				type: String,
				default: "",
			},
			formReadOnly: {
				type: Boolean,
				default: false,
			},
		},
		components: {
			UserSelect,
			SelectTree,
			RecordPayForm,
			GridSelect,
			GridSelects,
		},
		watch: {
			businessId: {
				handler(newVal) {
					if (this.businessId) {
						this.init(this.businessId);
					} else {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields();
							if (this.$store.state.user.id != "") {
								var users = this.$store.state.user;
							} else {
								var users = JSON.parse(sessionStorage.getItem("userInfo"));
							}
							if (this.$route.query.types) { //去除重合数据，显示两个
								this.inputForm.people.id = '';
								this.inputForm.peopleOffice.id = '';
								this.inputForm.peopleDepartment.id = '';
								this.inputForm.applydate = '';
							} else {
								this.inputForm.people.id = users.id;
								this.inputForm.peopleOffice.id = users.company.id;
								this.inputForm.peopleDepartment.id = users.office.id;
								this.inputForm.applydate = this.getNowTime();
								this.inputForm.aOffice = users.company.id;
								this.setAPersonUrl1 =
									"/sys/user/list?company.id=" + this.inputForm.aOffice;
								this.setAPersonUrl2 =
									"/sys/user/list?company.id=" +
									this.inputForm.bOffice +
									"&office.id=" +
									this.inputForm.peopleDepartment.id;
								this.$http({
									url: `/sys/oa/contractRelated/getSysEnterprise`,
									method: "get",
									params: {
										oid: this.inputForm.aOffice,
									},
								}).then(({
									data
								}) => {
									if (data) {
										//甲方信息带出
										this.inputForm.aAddress = data.enterprise.address;
										this.inputForm.aBillingNumber = data.enterprise.billingNumber;
										this.inputForm.aBillingAddress = data.enterprise.addresss;
										this.inputForm.aBillingPhone = data.enterprise.iphone;
										this.inputForm.aBillingBank = data.enterprise.accountBank;
										this.inputForm.aAccountNumber = data.enterprise.accountNumber;
									}
								});
							}
						});
					}
				},
				immediate: true,
				deep: false,
			},
		},
		created() {
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem(
					"userInfo",
					JSON.stringify(this.$store.state.user)
				);
			});
		},
		mounted() {
			setTimeout(() => {
				var canvas = document.getElementById("can");
				this.pan = canvas.getContext("2d"); //获取2D图像API接口
				this.pan.strokeStyle = "#000000"; //设置画笔颜色
				this.pan.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
				this.pan.lineWidth = 3; //设置画笔粗细
			}, 1000);
		},
		methods: {
			addInvoice() {
				console.log(this.invoiceChecks);
				if (this.inputForm.ticketList[0].id == "") {
					this.inputForm.ticketList = [];
				}
				for (var i = 0; i < this.invoiceChecks.length; i++) {
					this.inputForm.ticketList.push(this.invoiceChecks[i]);
				}
				this.addInvoiceDialog = false;
			},
			addInvoices(scope) {
				this.invoiceIndex = scope.$index;
				this.addInvoiceDialog = true;
				this.refreshList();
			},
			addInvoiceClose() {
				this.addInvoiceDialog = false;
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}, //合同预警
			refreshList() {
				this.invoiceloading = true
				this.$http({
					url: '/zhaohang/invoice/web/companyticket/sysCompanyTicket/getComTicketList',
					method: 'get',
					params: {
						'companyId': this.$store.state.user.companyId,
						'userId': this.$store.state.user.id,
						'type': "1",
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.invoiceloading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			selectionChangeHandle(val) {
				console.log(val);
				this.invoiceChecks = val;
			},
			//添加
			add() {
				let i = this.inputForm.ticketList.length
				if ((i == 0) ||
					(this.inputForm.ticketList[i - 1].invoiceDate != '' && this.inputForm.ticketList[i - 1].type != '' &&
						this.inputForm.ticketList[i -
							1].subType != '' && this.inputForm.ticketList[i - 1].withTaxAmount != '' && this
						.inputForm.ticketList[i - 1].suser != '' && this.inputForm.ticketList[i - 1].dmzUrl != '')
				) {
					let addTable = {
						invoiceDate: '', // 开票日期 
						type: '', // 发票类型
						subType: '', // 细分发票类型
						withTaxAmount: '', // 含税价格
						suser: '', // 收集人 
						dmzUrl: '', // 发票图片url
						id: '',
					}
					this.inputForm.ticketList.push(addTable)
				} else {
					this.$message.warning('请先填写当前已有行所有必填数据');
				}
			},
			//删除
			delAll() {
				for (var i = this.$refs.ticketLists.selection.length - 1; i >= 0; i--) {
					this.inputForm.ticketList.splice(this.$refs.ticketLists.selection[i].index, 1)
					this.$refs.invoiceTables.toggleRowSelection(this.$refs.ticketLists.selection[i], false);
				}
				this.$refs.ticketLists.clearSelection();
			},
			//签字
			signatureChange(e) {
				if (e == 0) {
					this.signatureDialog = true;
				} else {
					this.signatureDialog = false;
				}
			},
			mousedown(e) {
				this.paint = true;
				this.x = e.offsetX;
				this.y = e.offsetY;
				this.pan.beginPath();
				this.pan.moveTo(this.x, this.y);
			},
			// 鼠标移动
			mousemove(e) {
				if (this.paint) {
					var nx = e.offsetX,
						ny = e.offsetY;
					this.pan.lineTo(this.x, this.y);
					this.pan.stroke();
					this.x = nx;
					this.y = ny;
				}
			},
			// 鼠标松开
			mouseup(e) {
				this.paint = false;
			},
			mouseleave(e) {
				this.paint = false;
			},
			btnClick() {
				var canvas = document.getElementById("can");
				var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
				console.log(data, "-------");
				this.$http({ //保存图片的接口
					url: `/dlyrlTest/uploadBase`,
					method: "post",
					params: {
						base: data
					}
				}).then(({
					data
				}) => {
					if (data) {
						console.log(data, "fanhiude");
						this.signatureUrl = data.url
						//签订合同的接口
						this.$http({
							url: `/dlyrl/oa/buspaycontract/buspayContract/signBusContract`,
							method: "get",
							params: {
								contractId: this.contractId,
								pdfPath: this.archiveAnnexId,
								signpicture: this.signatureUrl
							}
						}).then(({
							data
						}) => {
							if (data && data.success) {
								this.signatureBtnUrl = data.url
								this.$message.success(data.msg);
								this.messageSuccess = true;
							}
						});
					}
				});

				// 重新设置宽度  就可以清除画板
				var canvas = document.getElementById("can");
				canvas.width = canvas.width;
				this.signatureDialog = false;
			},

			// 取消
			signatureCancel() {
				this.signatureDialog = false;
				this.signatureVal = "1";
				var canvas = document.getElementById("can");
				canvas.width = canvas.width;
				console.log(this.signatureVal);
			},
			// PDF 上传之前钩子调用
			beforeUploadPDF(file) {
				const extension = file.name.split('.').slice(-1) == 'pdf';
				if (!extension) {
					this.$message.error('上传模板只能是pdf格式!');
					return false;
				}
			},
			// 上传失败
			upError(e) {
				this.$msg("上传失败", "error");
			},
			sendMessage() {
				this.$http({
					url: "/dlyrl/oa/commercialcontract/commercialContract/sendMsg",
					method: "get",
					params: {
						contractId: this.contractId,
						type: '2'
					},
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.messageShow = true
						this.$message.success(data.msg);
						let interval = setInterval(() => {
							this.sendMessageNum--;
							if (this.sendMessageNum <= 0) {
								this.messageShow = false;
								clearInterval(interval)
							}
						}, 1000)
					}
					this.sendMessageNum = "60";
				});
			},
			//以上签字
			init(id, method) {
				this.method = method;
				this.contractId = id;
				if (this.$store.state.user.id != '') {
					this.userId = this.$store.state.user.id;
				} else {
					this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
				}
				if (method == "edit") {
					this.accessPermissions();
				}
				if (id) {
					this.showButton = true;
					this.annexArra = [];
					this.archiveAnnexArra = [];
					this.inputForm.recordPayList = [];
					this.loading = true;
					this.inputForm.id = id;
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields();
						this.$http({
							url: `/dlyrl/oa/buspaycontract/buspayContract/queryById?id=${this.inputForm.id}`,
							method: "get",
						}).then(({
							data
						}) => {
							// console.log(data)        
							this.inputForm = this.recover(this.inputForm, data.buspayContract);
							if (data.buspayContract.archive == 2) {
								this.messageSuccess = true;
							}
							this.inputForm.annex.split("|").forEach((item) => {
								if (item.trim().length > 0) {
									this.annexArra.push({
										name: decodeURIComponent(
											item.substring(item.lastIndexOf("/") + 1)
										),
										url: item,
									});
								}
							});
							this.inputForm.archiveAnnex.split("|").forEach((item) => {
								if (item.trim().length > 0) {
									this.archiveAnnexArra.push({
										name: decodeURIComponent(
											item.substring(item.lastIndexOf("/") + 1)
										),
										url: item,
									});
								}
							});
							this.loading = false;
							this.moneySwitch();
							this.refundAmountSwitch(); //付款转大写
							this.unpaidAmountSwitch(); //未付款转大写
						});
					});
				}
			},
			saveRecordPayRow(child) {
				if (child[0] === "") {
					this.inputForm.recordPayList.push(child[1]);
				} else {
					this.inputForm.recordPayList.forEach((item, index) => {
						if (item === child[0]) {
							this.inputForm.recordPayList.splice(index, 1, child[1]);
						}
					});
				}
			},
			addRecordPayRow(child) {
				this.$refs.recordPayForm.init("add");
			},
			viewRecordPayRow(child) {
				this.$refs.recordPayForm.init("view", child);
			},
			editRecordPayRow(child) {
				this.$refs.recordPayForm.init("edit", child);
			},
			delRecordPayRow(child) {
				this.inputForm.recordPayList.forEach((item, index) => {
					if (item === child && item.id === "") {
						this.inputForm.recordPayList.splice(index, 1);
					} else if (item === child) {
						item.delFlag = "1";
						this.inputForm.recordPayList.splice(index, 1, item);
					}
				});
			},
			// 表单提交
			saveForm(callback) {
				this.$refs["inputForm"].validate((valid) => {
					if (valid) {
						this.loading = true;
						this.$http({
							url: `/dlyrl/oa/buspaycontract/buspayContract/save`,
							method: "post",
							data: this.inputForm,
						}).then(({
							data
						}) => {
							this.loading = false;
							if (data && data.success) {
								callback(data.businessTable, data.businessId);
								this.$refs.inputForm.resetFields();
								this.inputForm.people.id = users.id;
								this.inputForm.peopleOffice.id = users.company.id;
								this.inputForm.peopleDepartment.id = users.office.id;
								this.inputForm.applydate = this.getNowTime();
							}
						});
					}
				});
			},
			getValuaes(value) {
				this.inputForm.bOffice = value[0];
				this.inputForm.bAddress = value[1];
				this.setAPersonUrl =
					"/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/list?enterpriseInformation.id=" +
					this.inputForm.bOffice;
			},
			getValuaesUser(value) {
				this.inputForm.bPerson = value[0];
				this.inputForm.bPhone = value[2];
			},
			getValuaesUser2(value) {
				// console.log(value);
				this.inputForm.contractPerson.id = value[0];
			},
			getValuaesUser1(value) {
				this.inputForm.aPerson.id = value[0];
				this.inputForm.aPhone = value[2];
			},
			//合作方式发生改变
			cooperationMethodChange() {
				this.inputForm.bOffice = "";
				this.inputForm.bAddress = "";
				this.inputForm.bPerson = "";
				this.inputForm.bPhone = "";
			},
			associatedTypeChange(value) {
				if (value == 0) {
					this.$http({
						url: `/dlyrl/oa/commercialcontract/commercialContract/list`,
						method: "get",
						params: {
							archive: 0
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.radioGUANlhtList = data.page.list;
						}
					});
				} else if (value == 1) {
					this.$http({
						url: `/dlyrl/oa/oaprojectcontract/oaProjectContract/list`,
						method: "get",
						params: {
							archive: 1
						},
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.radioGUANlhtList = data.page.list;
						}
					});
				}
				this.dialogGUANlht = true;
				this.radioGUANlht = "";
				console.log(this.radioGUANlhtList, "this.radioGUANlhtList");
			},
			radioGUANlhtChange(value) {
				this.inputForm.associatedContract = ''
				this.associatedContractName = ''
				console.log(value, "value");
				this.inputForm.associatedContract = value.id;
				this.inputForm.associatedContractName = value.contractName;
			},
			dialogGUANlhtQueding() {
				this.dialogGUANlht = false;
				console.log(this.inputForm.associatedContract, this.inputForm.associatedContractName);
			},

			//查询权限
			accessPermissions() {
				this.$http({
					url: `/dlyrl/oa/buspaycontract/buspayContract/findArchive`,
					method: "get",
					params: {
						userid: this.userId,
						contractid: this.contractId,
					},
				}).then(({
					data
				}) => {
					if (data) {
						console.log(data, 'accessPermissions')
						this.power = data.power;
					}
				});
			},
			//结束日期不能小于开始日期
			judgeHour() {
				if (
					this.inputForm.beginTime.length != 0 &&
					this.inputForm.endTime.length != 0
				) {
					var startDate = new Date(this.inputForm.beginTime);
					var endDate = new Date(this.inputForm.endTime);
					if ((endDate - startDate) / 86400000 < 7) {
						this.$message.warning("结束日期必须大于开始日期最少7天");
						this.inputForm.endTime = "";
						return false;
					}
				}
			},
			//合同形式发生改变
			contractFormChange(val) {
				this.inputForm.user.id = '';
				this.inputForm.contractLocation = '';
				this.archiveAnnexArra = [];
				if (val == 0) {
					this.$refs.inputForm.clearValidate(['archiveAnnex'])
				}
			},
			//发起流程合同金额转大写
			moneySwitch() {
				var money = this.inputForm.contractAmount;

				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				);
				//基本单位
				var cnIntRadice = new Array("", "拾", "佰", "仟");
				//对应整数部分扩展单位
				var cnIntUnits = new Array("", "万", "亿", "兆");
				//对应小数部分单位
				var cnDecUnits = new Array("角", "分", "毫", "厘");
				//整数金额时后面跟的字符
				var cnInteger = "整";
				//整型完以后的单位
				var cnIntLast = "元";
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				//金额整数部分
				var integerNum;
				//金额小数部分
				var decimalNum;
				//输出的中文金额字符串
				var chineseStr = "";
				//分离金额后用的数组，预定义
				var parts;
				if (money == "") {
					this.inputForm.capitalizeContract = chineseStr;
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return "";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf(".") == -1) {
					integerNum = money;
					decimalNum = "";
				} else {
					parts = money.split(".");
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" && money != 0) {
					chineseStr += cnInteger;
				}
				this.inputForm.capitalizeContract = chineseStr;
			},
			//回显付款金额转大写
			refundAmountSwitch() {
				var money = this.inputForm.refundAmount;
				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				);
				//基本单位
				var cnIntRadice = new Array("", "拾", "佰", "仟");
				//对应整数部分扩展单位
				var cnIntUnits = new Array("", "万", "亿", "兆");
				//对应小数部分单位
				var cnDecUnits = new Array("角", "分", "毫", "厘");
				//整数金额时后面跟的字符
				var cnInteger = "整";
				//整型完以后的单位
				var cnIntLast = "元";
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				//金额整数部分
				var integerNum;
				//金额小数部分
				var decimalNum;
				//输出的中文金额字符串
				var chineseStr = "";
				//分离金额后用的数组，预定义
				var parts;
				if (money == "") {
					this.inputForm.returnCapital = chineseStr;
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return "";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf(".") == -1) {
					integerNum = money;
					decimalNum = "";
				} else {
					parts = money.split(".");
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" && money != 0) {
					chineseStr += cnInteger;
				}
				this.inputForm.returnCapital = chineseStr;
			},
			//回显未付款金额转大写
			unpaidAmountSwitch() {
				var money = this.inputForm.unpaidAmount;
				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				);
				//基本单位
				var cnIntRadice = new Array("", "拾", "佰", "仟");
				//对应整数部分扩展单位
				var cnIntUnits = new Array("", "万", "亿", "兆");
				//对应小数部分单位
				var cnDecUnits = new Array("角", "分", "毫", "厘");
				//整数金额时后面跟的字符
				var cnInteger = "整";
				//整型完以后的单位
				var cnIntLast = "元";
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				//金额整数部分
				var integerNum;
				//金额小数部分
				var decimalNum;
				//输出的中文金额字符串
				var chineseStr = "";
				//分离金额后用的数组，预定义
				var parts;
				if (money == "") {
					this.inputForm.capitalizedAmount = chineseStr;
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return "";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf(".") == -1) {
					integerNum = money;
					decimalNum = "";
				} else {
					parts = money.split(".");
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" && money != 0) {
					chineseStr += cnInteger;
				}
				this.inputForm.capitalizedAmount = chineseStr;
			},
			//回显文件点击下载功能
			handlePreview(file) {
				document.location.href = file.url;
			},
			// 专用于编辑附表表单提交
			submit() {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						// console.log("this.inputForm",this.inputForm)
						this.$http({
							url: `/dlyrl/oa/buspaycontract/buspayContract/save`,
							method: 'post',
							data: this.inputForm
						}).then(({
							data
						}) => {
							if (data && data.success) {
								this.$message.success(data.msg);
							}
						})
					}
				})
			},
		},
	};
</script>
<style scoped>
	.el-form-item__content {
		margin-left: 0px !important;
	}

	.signature {
		width: 324px;
		height: 210px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0px 0px 5px #999;
		padding: 10px;
		margin: 0 auto;
	}

	.signature #can {
		background: #fff;
		border: 1px dashed red;
	}

	.signature .signatureGroup {
		margin-top: 10px;
		width: 100%;
	}

	.signature .signatureGroup .signatureBtn {
		width: 49%;
		float: left;
		text-align: center;
	}
</style>
